<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wrap">
        <h2>哈哈哈哈</h2>
        <ul class="list one" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
        <ul class="list two" title="">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li name="last">04</li>
        </ul>
    </div>
</body>
<script>
    //  document.getElementsByClassName()  获取相同class属性的节点列表  IE8及以下不支持
    // var ulList = document.getElementsByClassName("list");
    // console.log(ulList);

    // console.log(document.getElementsByClassName);

    // 封装一个方法 从页面的所有元素中 找到含有指定class名的元素 放到数组中 => 返回

    /* var className = "list";  //需要查找的class名

    var list = document.getElementsByTagName("*");  //获取页面中所有的元素
    console.log(list);

    var arr = [];
    for(var i=0;i<list.length;i++){
        var ele = list[i];
        // console.log(ele);
        var _class = ele.getAttribute("class");
        console.log(_class);
        if(_class){  // 有值 => 含有class名
            var classList = _class.split(" "); 
            console.log(classList);
            if(indexOf(classList,className)!=-1){
                arr.push(ele);
            }
        }
    }
    console.log(arr); */


    // IE兼容
    // (1)  IE低版本中不存在对应的方法  => 自己写一个

    console.log(document.getElementsByClassName);
    if(!document.getElementsByClassName){  // 没有此方法(IE低版本 8↓) document.getElementsByClassName == undefined
        document.getElementsByClassName = myGetElementsByClassName;
    }

    var ulList = document.getElementsByClassName("list");
    console.log(ulList);


    function myGetElementsByClassName(className){
        // var className = "list";  //需要查找的class名

        var list = document.getElementsByTagName("*");  //获取页面中所有的元素
        // console.log(list);

        var arr = [];
        for(var i=0;i<list.length;i++){
            var ele = list[i];
            // console.log(ele);
            var _class = ele.getAttribute("class");
            // console.log(_class);
            if(_class){  // 有值 => 含有class名
                var classList = _class.split(" "); 
                // console.log(classList);
                if(indexOf(classList,className)!=-1){
                    arr.push(ele);
                }
            }
        }
        return arr;
    }


    function includes(list,char){
        var flag = false;
        for(var i = 0; i < list.length; i++){
            var item = list[i];
            if(item === char){
                flag = true;
                break;
            }
        }
        // console.log(flag);
        return flag;
    }

    // 返回某个元素在数组中第一次出现的位置 存在:返回下标 不存在:-1
    function indexOf(list,char){  
        var index = -1;
        for(var i = 0; i < list.length; i++){
            var item = list[i];
            if(item === char){
                index = i;
                break;
            }
        }
        // console.log(index);
        return index;
    }

    


</script>
</html>